<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="static/css/admin.css" rel="stylesheet" type="text/css">
		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="static/css/bootstrap.css" />
		<script type="text/javascript" src="static/js/jquery.min.js" ></script>
		<script type="text/javascript" src="static/js/bootstrap.js" ></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

	</head>
	<body>
		
		<div id="container">
			<!--显示订单区域-->
			<div class="m-order" style="margin-bottom: 0px;">
				<div class="s-bar"><i class="s-icon"></i>我的订单
					<a href="#" class="i-load-more-item-shadow">全部订单</a>
				</div>
				<ul>
					<li style="width: 25%;">
						<a @click="queryByStatus(1)"><i><img src="static/images/pay.png"></i> <span>待付款<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(2)"><i><img src="static/images/send.png"></i> <span>待发货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(3)"><i><img src="static/images/receive.png"></i> <span>待收货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>待评价<em class="m-num" style="display: none;">0</em></span></a>
					</li>
				</ul>
			</div>
			
			<div class="box-container-bottom" style="margin-bottom: 15px;"></div>

			<!--显示订单列表-->
			<div class="m-logistics">
				<div class="s-bar"><i class="s-icon"></i>订单动向</div>
				<div class="s-content">
					<ul class="lg-list"></ul>
					<div id="wrap" class="wrap">
						<nav class="zpagenav">
							<ul class="page-ul"></ul>
							<table class="table">
								<tr>
									<th>序号</th>
									<th>订单商品</th>
									<th>订单状态</th>
									<th>时间</th>
									<th>操作</th>
								</tr>
								<template v-for="order,index in orders">
									<tr>
										<td>{{index+1}}</td>
										<td>{{order.untitled.substring(0,order.untitled.length-1)}}</td>
										<td>
											<span v-if="order.status == '1'">待付款</span>
											<span v-else-if="order.status == '2'">待发货</span>
											<span v-else-if="order.status == '3'">待收货</span>
											<span v-else-if="order.status == '4'">待评价</span>
											<span v-else-if="order.status == '5'">已完成</span>
											<span v-else-if="order.status == '6'">已关闭</span>
										</td>
										<td>{{order.createTime}}</td>
										<td>
											<template v-if="order.status == '1'">
												<button class="btn btn-success btn-xs">去支付</button>
												<button class="btn btn-danger btn-xs">取消订单</button>
											</template>
											<template v-if="order.status == '2'">
												<button class="btn btn-danger btn-xs">取消订单</button>
											</template>
											<template v-if="order.status == '3'">
												<button class="btn btn-success btn-xs">确认收货</button>
											</template>
											<template v-if="order.status == '4'">
												<button class="btn btn-success btn-xs" @click="gotoComment" :data-index="index">去评价</button>
											</template>
											<template v-if="order.status == '5' || order.status == '6'">
												<button class="btn btn-success btn-xs">删除</button>
											</template>
										</td>
									</tr>
								</template>

							</table>
							<tr colspan="5">
								<!--分页-->
							</tr>
							<el-pagination
									background
									layout="prev, pager, next"
									@current-change="pager"
									:page-count="pageCount"
									:page-size="limit"
									:total="count">
							</el-pagination>
						</nav>
					</div>
				</div>
			</div>
		</div>

		<script src="static/js/vue.js"></script>
		<script src="static/js/axios.min.js"></script>
		<script src="static/js/utils.js"></script>
		<script src="static/js/cookie_utils.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			var baseUrl = "http://localhost:8080/";
            var baseUrl = "http://localhost:8080/";
            layui.use('layer', function(){
                var layer = layui.layer;
            });
			var vm = new Vue({
				el:"#container",
				data:{
				    token:"",
					userId:"",
					pageNum:1,
					limit:2,
					status:"",
					orders:[],
					count:0,
					pageCount:0
				},
				created:function (){
				    this.token = getCookieValue("token");
				    this.userId = getCookieValue("userId");
				    //获取订单信息
					var url1 = baseUrl + "order/list";
					var orderParam = {
                        userId:this.userId,
                        pageNum:this.pageNum,
                        limit:this.limit,
					}
					if (status!=null&&status!=""){
					    orderParam.status = this.status;
					}
					axios({
						url:url1,
						method:"get",
						headers:{
						    token:this.token
						},
						params:orderParam
					}).then((res)=>{
                        if (res.data.code==10000){
                            this.orders=res.data.data.list;
                            this.count=res.data.data.count;
                            this.pageCount=res.data.data.pageCount;
						}
					});
				},
				methods:{
                    pager:function (currentPage){
                        //获取订单信息
                        var url1 = baseUrl + "order/list";
                        this.pageNum = currentPage;
                        var orderParam = {
                            userId:this.userId,
                            pageNum:this.pageNum,
                            limit:this.limit,
                        }
                        if (status!=null&&status!=""){
                            orderParam.status = this.status;
                        }
                        axios({
                            url:url1,
                            method:"get",
                            headers:{
                                token:this.token
                            },
                            params:orderParam
                        }).then((res)=>{
                            if (res.data.code==10000){
                                this.orders=res.data.data.list;
                                this.count=res.data.data.count;
                                this.pageCount=res.data.data.pageCount;
                            }
                        });
					},
                    queryByStatus:function (status){
                        this.pageNum = 1;
                        this.status = status;
                        console.log(status)
						var url2 = baseUrl + "order/list";
                        axios({
							url:url2,
							method:"get",
							headers:{
							    token:this.token
							},
							params:{
							    userId:this.userId,
								pageNum:this.pageNum,
								limit:this.limit,
								status:this.status
							}
						}).then((res)=>{
                            console.log(res.data)
                            this.orders=res.data.data.list;
                            this.count=res.data.data.count;
                            this.pageCount=res.data.data.pageCount;
						});
					}
				}
			});
		</script>
	</body>
</html>
